<template>
  <div class="dance-container" v-loading="isLoading">
    <div class="filter-container" >
      <div class="filter-content-container" :class="{fold:!isShow}"  >
        <el-row v-for="(item,index) in selectList" :key="index" >
          <el-col :span="2">
            <div class="grid-content ep-bg-purple npm">
              {{item.label}}:
            </div>
          </el-col>
          <el-col :span="22">
            <div
              class="grid-content ep-bg-purple-light course_btn course_msg"
              v-for="choise in item.choises" :key="choise.id"
            >
              {{choise.name}}
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="develop" @click="isShow = !isShow">
        <div>
          {{isShow ? "收起" : "展开全部"}}
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent} from "vue";
export default defineComponent({
    name:"DanceDetails",
})
</script>

<script setup lang="ts">
import { ref} from "vue";
import {useLiveStore} from "@/store/modules/live";
import {storeToRefs} from "pinia";
const isShow = ref(false)
const LiveStore = useLiveStore()
const {selectList,isLoading} = storeToRefs(LiveStore)
</script>

<style scoped lang="scss">
.dance-container{
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f5f7f9;
  min-width: 1200px;
  .filter-container{
    border-radius: 4px;
    background: #fff;
    padding:26px 30px;
    width: 1140px;
    margin-bottom: 10px;
    margin-top: 10px;
    .fold{
      height: 130px;
    }
    .filter-content-container{
      overflow: hidden;
      box-sizing: border-box;
      .grid-content {
        border-radius: 4px;
        margin-top: 6px;
        font-size: 14px;
      }
      .course_msg {
        font-size: 14px;
        color: #7d8090;
        padding: 7px 13px;
        margin: 0 24px 10px 0;
        cursor: pointer;
      }
      .course_btn {
        float: left;
        margin-right: 24px;
        color: #7d8090;
        font-size: 14px;
      }
      .el-row {
        margin-bottom: 20px;
      }
      .el-col {
        border-radius: 4px;
      }
      .el-col-2 {
        color: #7d8090;
      }
    }
    .develop{
      display: flex;
      justify-content:center;
      align-items: center;
      color:#f93684;
      font-size: 14px;
      cursor: pointer;
    }
  }
}
</style>
